<script setup>
  import Header from '@/components/Header.vue';
import router from '@/router';

  let w1 = () => {
    router.push('/MyCredentials');
  }
</script>




<template>
    <!-- 导航 -->
  <Header></Header>


    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" data-bs-toggle="collapse" href="#navbarNav" aria-expanded="false" aria-controls="collapseExample"><img src="./assets/img/icon_logo.png" alt="" width="150px"></a>
    <button class="navbar-toggler btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" style="">
        <li class="nav-item active">
          <a class="nav-link" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">PROCEDURE</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SERVICE</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
    <div class="collapse navbar-collapse" id="collapseExample">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Log In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">中文</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">English</a>
        </li>
      </ul>
    </div>
  </nav> -->


    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a href="#" class="navbar-brand" data-bs-toggle="collapse" data-bs-target="#navlog"><img
          src="./assets/img/icon_logo.png" alt="" width="150px"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navlog">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">PROCEDURE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">SERVICE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">CONTACT</a>
          </li>
        </ul>
      </div>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="">Log In</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Sign Up</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">中文</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">English</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
 -->

    <!-- <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" data-bs-toggle="collapse" href="#navbarLog"><img src="./assets/img/icon_logo.png" alt="" width="150px"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarLog">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="text-align: center;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">PROCEDURE</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">SERVICE</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">CONTACT</a>
        </li>
      </ul>
    </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="">Log In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">中文</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">English</a>
        </li>
      </ul>
      </div>
  </div>
</nav> -->


    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" data-bs-toggle="collapse" href="#navbarNav"><img src="./assets/img/icon_logo.png" alt="" width="150px"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">PROCEDURE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">SERVICE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">CONTACT</a>
          </li>
        </ul>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">Log In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">中文</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">English</a>
        </li>
      </ul>
      </div>
    </div>
  </nav> -->


    <!-- <nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav> -->



    <!-- banner图 -->
    <div class="banner">
        <div class="banner-content">
            <h1>ZETRIX ATTEST</h1>
            <h3>EDUCATION MALAYSIA</h3>
            <p>Zetrix Attest is a new initiative by EMGS to improve</p>
            <p>application processing speed by ensuring 100% verified</p>
            <p>application documents</p>
            <button @click="w1"><i>Get Started</i>→</button>
        </div>
        <div class="banner-img">
            <img src="../../assets/img/icon_banner_pic.png" alt="">
        </div>
    </div>

    <!-- <section class="p-5 text-center text-sm-start">
    <div class="container">
      <div class="d-flex">
        <div>
          <h1>ZETRIX ATTEST</h1>
          <h3>EDUCATION MALAYSIA</h3>
          <p class="my-4">Zetrix Attest is a new initiative by EMGS to improve application processing speed by ensuring 100% verified
            application documents
          </p>
          <button class="btn">Get Started</button>
        </div>
        <img src="./assets/img/Group 34417.svg" alt="" class="w-50">
      </div>
    </div>
  </section> -->

    <!-- 中间内容区域 -->
    <div class="content">
        <!-- banner下面的白色小块 -->
        <div class="banner-white">
            <div class="banner-white-head">
                <p>Zetrix Attest provides</p>
                <p>independent verifiable proof of</p>
            </div>
            <div class="banner-white-bottom">
                <div class="banner-white-bottom-title">
                    <div>
                        <img src="../../assets/img/Vector.svg" alt="">
                    </div>
                    <p>Date and time of issurance of the document</p>
                </div>
                <div class="banner-white-bottom-title">
                    <div>
                        <img src="../../assets/img/Vector1.svg" alt="">
                    </div>
                    <p>Name of the issuing authority with Decentralized ID (BID DID)</p>
                </div>
                <div class="banner-white-bottom-title">
                    <div>
                        <img src="../../assets/img/Vector2.svg" alt="">
                    </div>
                    <p>Current validity of the document (active, expired, revoked)</p>
                </div>
                <div class="banner-white-bottom-title">
                    <div>
                        <img src="../../assets/img/Vector3.svg" alt="">
                    </div>
                    <p>Authenticity of the underlying claim</p>
                </div>
            </div>
        </div>
        <!-- 标题一 -->
        <div class="title-first" id="section1">
            <div>
                <h3>Verification Procedure</h3>
            </div>
            <div class="title-first-content">
                <div class="title-first-content-round">
                    <p>01</p>
                </div>
                <div class="title-first-content-title">
                    <img src="../../assets/img/Group.svg" alt="">
                    <p>Sign up or create an account</p>
                </div>
                <div class="title-first-content-arrow"><img src="../../assets/img/Vector4.svg" alt=""></div>
                <div class="title-first-content-round">
                    <p>02</p>
                </div>
                <div class="title-first-content-title">
                    <img src="../../assets/img/Group1.svg" alt="">
                    <p>Fill up the application info & upload documents</p>
                </div>
                <div class="title-first-content-arrow"><img src="../../assets/img/Vector4.svg" alt=""></div>
                <div class="title-first-content-round">
                    <p>03</p>
                </div>
                <div class="title-first-content-title">
                    <img src="../../assets/img/Group2.svg" alt="">
                    <p>Pay verification fee</p>
                </div>
            </div>
        </div>
        <!-- 标题二 -->
        <div class="title-second" id="section2">
            <div>
                <h3>Verification Services available for the following documents:</h3>
            </div>
            <div class="title-second-content">
                <img src="../../assets/img/Group3.svg" alt="">
                <div class="title-second-content-title">
                    <div class="title-second-content-title-z">
                        <div>√</div>
                        <p>Passport</p>
                    </div>
                    <div class="title-second-content-title-z">
                        <div>√</div>
                        <p>Academic transcripts and certificates</p>
                    </div>
                    <div class="title-second-content-title-z">
                        <div>√</div>
                        <p>Offer letter from the Malaysian institution</p>
                    </div>
                    <div class="title-second-content-title-z">
                        <div>√</div>
                        <p>Proof of financial ability</p>
                    </div>
                    <div class="title-second-content-title-z">
                        <div>√</div>
                        <p>Medical report</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页尾上面的白色小块 -->
    <div class="footer-white" id="section3">
        <div class="footer-white-left">
            <h3>Contact Us</h3>
            <p>Portal: https://www.zetrix.com/zcert/academic/</p>
            <p>Email: help@myeg.com.my</p>
        </div>
        <div class="footer-white-right">
            <button><i>Contact Now</i>→</button>
        </div>
    </div>
    <!-- 页尾部分 -->
    <div class="footer">
        <div class="footer-left">
            <div class="logo">
                <a href="">
                    <img src="../../assets/img/icon_logo.png" alt="">
                </a>
            </div>
            <div class="footer-left-between">
                <a href="">
                    <img src="../../assets/img/logo1.svg" alt="">
                </a>
                <p>Education Malaysia Global Services (EMGS)</p>
            </div>
            <div class="footer-left-bottom">
                <p>Copyright © 2024 MY E.G SERVICES BERHAD [200001003034 (505639-K)]. All Rights Reserved.</p>
            </div>
        </div>
        <div class="footer-between">
            <div class="footer-between-top">
                <p>About Us</p>
                <p>FAQ</p>
            </div>
            <div class="footer-between-bottom">
                <p>Contact Us</p>
            </div>
        </div>
        <div class="footer-right">
            <div class="footer-right-icon">
                <div class="footer-right-icon-top">
                    <a href=""><img src="../../assets/img/twitter.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/telegram.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/discord.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/linkedin.svg" alt=""></a>
                </div>
                <div class="footer-right-icon-bottom">
                    <a href=""><img src="../../assets/img/facebook.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/ins.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/xiaohongshu.svg" alt=""></a>
                    <a href=""><img src="../../assets/img/tiktok.svg" alt=""></a>
                </div>
            </div>
            <div class="footer-right-bottom">
                <div>
                    <p>Privacy Policy</p>
                </div>
                <div>
                    <p>Terms & Conditions</p>
                </div>
            </div>
        </div>
    </div>
</template>





<style scoped>

/* 导航 */
/* color: var( --text-red-color); */

/* banner图 */
.banner {
    width: 100%;
    height: 799px;
    background-color: #FFE7E7;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;

    .banner-img img {
        width: 507.33px;
        height: 446.37px;
        margin-left: 50px;
    }

    .banner-content {
        h1 {
            font-size: 60px;
            font-weight: 800;
            line-height: 74.41px;
            color: #0f094c;
        }

        h3 {
            font-size: 36px;
            font-weight: 800;
            line-height: 44.65px;
            color: #0f094c;
            margin-bottom: 50px;
        }

        p {
            font-size: 18px;
            font-weight: 400;
            line-height: 25px;
            color: #0f094c;
            opacity: 0.8;
        }

        button {
            width: 291px;
            height: 69.84px;
            border-radius: 10px;
            border: none;
            background-color: #ec535b;
            color: #ffffff;
            font-size: 24px;
            margin-top: 50px;
            cursor: pointer;

            i {
                font-style: normal;
                font-size: 24px;
                color: #ffffff;
                margin-right: 30px;
            }
        }
    }
}

/* 中间内容区域 */
.content {
    margin: -150px auto;
    width: 1199px;
    display: flex;
    flex-direction: column;

    /* banner下面的白色小块 */
    .banner-white {
        background-color: #ffffff;
        width: 1199px;
        height: 491px;
        border-radius: 10px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 1px 5px 10px rgba(153, 153, 153, .15);

        .banner-white-head{
          text-align: center;
          p{
            font-size: 30px;
            font-weight: 700;
            color: #0F094C;
          }
            
        }

        .banner-white-bottom {
            display: flex;
            align-items: baseline;
            margin-top: 80px;

            .banner-white-bottom-title {
              width: 275px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                text-align: center;

                div {
                    width: 64px;
                    height: 64px;
                    background-color: #FFE7E7;
                    margin-bottom: 50px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 22px;
                        height: 22px;
                    }
                    
                }
                p{
                  width: 235px;
                }
            }
        }
    }

    /* 标题一 */
    .title-first {
        div h3 {
            font-size: 32px;
            font-weight: 700;
            color: #0F094C;
            margin-top: 150px;
        }

        .title-first-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 100px;

            .title-first-content-round {
                width: 66px;
                height: 66px;
                border-radius: 50%;
                background-color: #ec535b;
                text-align: center;
                line-height: 66px;
                margin-bottom: -15px;
                z-index: 20;

                p {
                    font-size: 24px;
                    font-weight: 800;
                    color: #ffffff;
                }
            }

            .title-first-content-title {
                width: 722px;
                height: 94px;
                border-radius: 10px;
                background-color: #FFE7E7;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 32px;
                    height: 32px;
                    color: #0F094C;
                }

                p {
                    font-size: 24px;
                    font-weight: 500;
                    color: #0F094C;
                    margin-left: 20px;
                }
            }

            .title-first-content-arrow {
                margin: 20px 0;
            }
        }
    }

    /* 标题二 */
    .title-second {
        div h3 {
            font-size: 32px;
            font-weight: 700;
            color: #0F094C;
            margin-top: 150px;
        }

        .title-second-content {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 150px;

            .title-second-content-title {
                display: flex;
                flex-direction: column;

                .title-second-content-title-z {
                    display: flex;
                    margin: 20px 0;
                    align-items: center;

                    div {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        background-color: #ec535b;
                        color: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    p {
                        font-size: 24px;
                        font-weight: 500;
                        color: #0F094C;
                        margin-left: 20px;
                    }
                }
            }
        }
    }
}

/* 页尾上面的白色小块 */
.footer-white {
    width: 1391px;
    height: 364px;
    background-color: #ffffff;
    margin: 250px auto;
    box-shadow: 1px 5px 10px rgba(153, 153, 153, .15);
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .footer-white-left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        h3 {
            font-size: 44px;
            font-weight: 700;
            color: #0F094C;
            margin-bottom: 50px;
        }

        p {
            font-size: 22px;
            font-weight: 400;
            color: #0F094C;
            line-height: 40px;
        }
    }

    .footer-white-right button {
        width: 291px;
        height: 69.84px;
        border-radius: 10px;
        border: none;
        background-color: #ec535b;
        color: #ffffff;
        font-size: 24px;
        margin-top: 50px;

        i {
            font-style: normal;
            font-size: 24px;
            color: #ffffff;
            margin-right: 30px;
        }
    }

}

/* 页尾部分 */
.footer {
    display: flex;
    width: 1391px;
    margin: 30px auto;
    justify-content: space-between;

    .footer-left {
        display: flex;
        flex-direction: column;

        .logo {
            img {
                width: 150px;
            }
        }

        .footer-left-between {
            display: flex;
            align-items: center;
            margin-top: 20px;

            p {
                font-size: 16px;
                font-weight: 500;
                color: #0F094C;
            }
        }

        .footer-left-bottom p {
            font-size: 14px;
            font-weight: 400;
            color: #0F094C;
            margin-top: 50px;
        }
    }

    .footer-between {
        display: flex;
        flex-direction: column;

        .footer-between-top {
            display: flex;

            p {
                font-size: 16px;
                font-weight: 400;
                color: #0F094C;
                line-height: 32px;
                margin-right: 120px;
            }
        }

        .footer-between-bottom {
            p{
                font-size: 16px;
                font-weight: 400;
                color: #0F094C;
                line-height: 32px;
            }
        }
    }

    .footer-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;

        .footer-right-icon img {
            margin: 0 10px 10px 10px;
        }

        .footer-right-bottom {
            display: flex;

            div {
                margin-left: 80px;
                font-size: 14px;
                font-weight: 400;
                color: #0F094C;
            }
        }
    }
}
</style>